<template>
    <div class="bindinfo">
        <!-- 订单信息 -->
        <van-nav-bar :title="bindType == 1 ? '支付宝绑定' : bindType == 2 ? '微信绑定' : '营业执照'" left-arrow
            @click-left="onClickLeft" />
        <div class="content">
            <van-form v-if="bindType == 1">
                <van-cell-group :border="false" inset title="真实姓名">
                    <van-cell :border="false"><van-field v-model="name" placeholder="请输入真实姓名" /></van-cell>
                </van-cell-group>
                <van-cell-group :border="false" title="支付宝号">
                    <van-cell :border="false"><van-field v-model="num" placeholder="请输入用户名" /></van-cell>
                </van-cell-group>
            </van-form>
            <van-form v-if="bindType == 2">
                <van-cell-group :border="false" inset title="微信号">
                    <van-cell :border="false"><van-field v-model="name" placeholder="请输入微信号" /></van-cell>
                </van-cell-group>
                <van-cell-group :border="false" title="微信收款码">
                    <van-uploader :max-count="1" :v-model="imageUrl" :after-read="afterRead" preview-image
                        preview-size="60" :accept="'image/*'">
                        <!-- 使用v-if控制上传图标和预览图的显示 -->
                        <div class="upload" v-if="!imageUrl">
                            <van-icon style="font-size: 36px" name="add" aria-label="上传图片" />
                        </div>
                        <!-- 预览图 -->
                        <div v-else style="width: 120px; height: 120px;">
                            <van-image fit="cover" :src="imageUrl" />
                        </div>
                    </van-uploader>
                </van-cell-group>
            </van-form>
            <van-form v-if="bindType == 3">
                <van-cell-group :border="false" title="请上传营业执照">
                    <van-uploader>
                        <div class="upload">
                            <van-icon style="font-size: 36px" name="add" />
                        </div>
                    </van-uploader>
                    <!-- <van-cell :border="false">
                    </van-cell> -->
                </van-cell-group>
            </van-form>
            <van-button type="primary" @click="onSubmit">确认绑定</van-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { Toast } from 'vant';
import { commonUpload, changeWechat, changeAlipay } from '../../../../api/index';
const name = ref("");
const num = ref("");
const imageUrl = ref("");
const ServeBackImageUrl = ref("");
const bindType = ref(history.state.type);

let formData = new FormData();
// 定义onClickLeft方法
const onClickLeft = () => history.back();
const onSubmit = (res) => {
    if (bindType.value == 2) {
        formData = new FormData();
        formData.append("wechat", name.value)
        formData.append("image", ServeBackImageUrl.value)
        changeWechat(formData).then(res=>{
            // console.log(res)
            if (res.code==1) {
                history.back();
            } else {
                Toast(res.msg)
            }
        })
        formData = new FormData();
    } else if (bindType.value == 1) {
        formData = new FormData();
        formData.append("name", name.value)
        formData.append("account", num.value)
        changeAlipay(formData).then(res => {
            // console.log(res)
            if (res.code == 1) {
                history.back();
            } else {
                Toast(res.msg)
            }
        })
        formData = new FormData();
    }
};

const afterRead = (file: any) => {
    file.status = 'uploading';
    file.message = '上传中...';
    imageUrl.value = file.content;
    let formData = new FormData();
    // 此时可以自行将文件上传至服务器
    // console.log(file);
    formData.append("file", file.content);
    // let obj = { file: file.content }
    commonUpload(formData).then(res => {
        console.log(res)
        if (res.code == 1) {
            ServeBackImageUrl.value = res.data.fullurl
        } else {
            Toast(res.msg)
        }
    })
    formData = new FormData();
};
onMounted(() => {
    console.log(history.state)
    name.value=history.state.info
    imageUrl.value=history.state.image
    num.value = history.state.account
})
</script>

<style lang="less" scoped>
@import url(../../../../style/common.css);

.bindinfo {
    background: #FFFFFF;
    width: 100%;
    height: 100vh;
}

.van-nav-bar {
    width: 100%;
    height: 52px;
}

.content {
    .van-cell {
        margin: 0 20px;
        text-align: left;
        width: 339px;
        height: 47px;
        background: #F9F9F9;
        border-radius: 9px 9px 9px 9px;
        display: flex;
        align-items: center;
        box-sizing: border-box;

        .van-field {
            margin: 0;
            padding: 0;
        }
    }

    .upload {
        width: 335px;
        height: 115px;
        background: #F9F9F9;
        border-radius: 9px 9px 9px 9px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 20px;
        box-sizing: border-box;
    }

    .van-button {
        margin-top: 24px;
        width: 345px;
        height: 40px;
        background: linear-gradient(143deg, #0A84FF 0%, #0A7EF3 100%);
        border-radius: 347px 347px 347px 347px;
    }
}



:deep(.van-nav-bar__left .van-badge__wrapper) {
    color: #272635;
}

:deep(.content .van-cell-group__title) {
    text-align: left;
}
</style>